<template lang="html">
  <div class="gambit-list">
    <ul class="gambit-list-container">
      <router-link :to="{ name:'IndexParticulars',params:{ id: item.id } }" tag='li' v-for='(item,index) in gambitlistData' :key='index'>
        <h3>{{ item.title }}</h3>
        <div class="gambit-list-box clear-fix">
          <div class="gambit-list-left">
            <img :src="item.img" alt="">
          </div>
          <div class="gambit-list-content">
            <div class="gambit-list-text">{{ item.content }}</div>
            <div class="gambit-list-like">
              <span>{{ item.like }}</span>次阅读
            </div>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name:'GambitList',
  data(){
    return{

    }
  },
  props:{
    gambitlistData:{
      type:Array,
      default:function(){
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>

.gambit-list{
  width: 100%;
  padding: 0 0.2rem 1.17rem;
  background-color: #fff;
  box-sizing: border-box;
  .gambit-list-container{
    li{
      padding: 0.2rem 0;
      border-bottom: 2px solid #f1f1f1;
      position: relative;
      h3{
        font-weight: normal;
        font-size: 0.28rem;
      }
      .gambit-list-box{
        .gambit-list-left,.gambit-list-content{
          float: left;
        }
        .gambit-list-content{
          width: 4.70rem;
          margin-left: 0.2rem;
          .gambit-list-text{
            font-size: 0.24rem;
            color: #757575;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .gambit-list-like{
            font-size: 0.24rem;
            color: #000;
            text-align: right;
            position: absolute;
            bottom: 0.2rem;
            right: 0.2rem;
            span{
              color: #ff5555;
            }
          }
        }
        img{
          width: 2.13rem;
          height: 1.43rem;
          border-radius: 0.01rem;
        }
      }
    }
  }
}

</style>
